<template>
  <div class="content-view">
    <div class="table-head-tool">
      <Button type="primary" @click="addWarp">新增</Button>

      <Button type="warning" :loading="isBulid" shape="circle" icon="ios-analytics" @click="build">
        <span v-if="!isBulid">网站编译</span>
        <span v-else>编译中...</span>
      </Button>
    </div>
    <div class="table-body">
      <card class="tree-box">
        <treegrid expand-key="Name" :columns="gridOption.columns" :data="gridOption.data">
        </treegrid>
      </card>
    </div>
    <editModal ref="editModal" :columns="gridOption.editColumns" :rules="gridOption.rules">
      <div slot="bottom">

        <fieldItem name='类别'>
          <RadioGroup v-model="editRow.type">
            <Radio :label="item.key" :key="item.key" v-for="item in typeSource">
              {{item.value}}
            </Radio>
          </RadioGroup>
        </fieldItem>

        <div v-if="editRow.type==='页面'||editRow.type==='功能'">
          <fieldItem name='数据模型'>
            <Select v-model="editRow.model_id">
              <Option v-for="item in modelRows" :value="item.id" :key="item.id">{{ item.value }}</Option>
            </Select>
          </fieldItem>

          <fieldItem name='组件地址'>
            <Input v-model="editRow.component" placeholder="(模块+路由).vue" />
          </fieldItem>

          <fieldItem name='api地址'>
            <Input v-model="editRow.api_path" placeholder="(模型).js" />
          </fieldItem>
        </div>

        <fieldItem name='地址' v-if="editRow.type==='外链'">
          <Input v-model="editRow.component" placeholder="请输入网址" />
        </fieldItem>

      </div>
    </editModal>
  </div>
</template>

<script>
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer'
import modelServer from '@/api/system_high/modelServer'
import { mapGetters } from 'vuex'
export default {
  name: 'tree_table_page',
  data() {
    let rules = {}
    rules['name'] = [{ required: true, message: '请填写昵称' }]
    rules['path'] = [{ required: true, message: '请填写路由' }]
    rules['icon'] = [{ required: true, message: '请选择图标' }]
    rules['is_show_menu'] = [{ required: true, message: '请选择是否在菜单' }]
    rules['is_show'] = [{ required: true, message: '请选择是否启用' }]
    rules['sort'] = [{ required: true, message: '请填写排序' }]

    const source = [
      { key: 0, value: '否' },
      { key: 1, value: '是' },
    ]
    let that = this

    const editColumns = [
      { key: 'id', title: 'id' },
      { key: 'name', title: '名称' },
      {
        key: 'parent_node_ids',
        title: '父菜单',
        editRender(h, value) {
          let val = value || []
          return h('Cascader', {
            props: { filterable: true, 'change-on-select': true, value: val, data: that.gridOption.menuData },
            on: {
              'on-change'(value, selectedData) {
                that.parent_node_ids = value
                that.editRow.parent_id = value[value.length - 1]
              },
            },
          })
        },
      },
      { key: 'path', title: '路由', placeholder: '例:system,user' },
      {
        key: 'icon',
        title: '图标',
        com: 'SelectIcon',
        render(h, params) {
          return h('Icon', { props: { type: params.row.icon, size: '24' } })
        },
      },

      {
        key: 'is_show_menu',
        title: '是否显示在菜单',
        com: 'Radio',
        source: source,
        render(h, param) {
          if (param.row.is_show_menu) {
            return <span>是</span>
          } else {
            return <span>否</span>
          }
        },
      },
      {
        key: 'is_show',
        title: '是否启用',
        com: 'Radio',
        source: source,
        render(h, param) {
          if (param.row.is_show) {
            return <span>是</span>
          } else {
            return <span>否</span>
          }
        },
      },
      { key: 'sort', title: '排序' },
    ]

    return {
      parent_node_ids: [],
      editRow: { type: '', model_id: '', parent_id: '', path: '', component: '' },
      typeSource: [
        { key: '菜单', value: '菜单' },
        { key: '页面', value: '页面' },
        { key: '功能', value: '功能' },
        { key: '外链', value: '外链' },
      ],
      menuRows: [],
      modelRows: [],
      gridOption: {
        rules,
        editColumns,
        columns: [
          { title: 'id', key: 'id', width: '80px', is_show_edit: 0 },
          ...editColumns,
          {
            key: 'type',
            title: '类别',
            com: 'Radio',
            source: [
              { key: '菜单', value: '菜单' },
              { key: '页面', value: '页面' },
              { key: '外链', value: '外链' },
            ],
          },
          { key: 'component', title: '组件地址' },
          { key: 'api_path', title: 'api地址' },
          { key: 'model_id', title: '模型id' },
          {
            key: 'operat',
            title: '操作',
            type: 'template',
            width: 400,
            render: (h, params) => {
              let btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => {
                    this.editModal(params.row)
                  },
                },
                {
                  title: '删除',
                  type: 'primary',
                  click: () => {
                    this.delConfirm(params.row)
                  },
                },
              ]

              if (params.row.type === '菜单') {
                btns.push({
                  title: '新增页面',
                  type: 'primary',
                  click: () => {
                    this.addSonWarp(params.row)
                  },
                })
              }

              //  else if (params.row.type === '页面' && params.row.model_id) {
              //   btns.push({
              //     title: '表单管理',
              //     type: 'primary',
              //     click: () => {},
              //   })
              // }

              return uiTool.getBtn(h, btns)
            },
          },
        ],
        data: [],
        menuData: [],
      },
    }
  },
  computed: {
    ...mapGetters({
      isBulid: 'isBulid',
    }),
  },
  created() {
    this.init()
    this.initCol()
  },
  watch: {
    'editRow.parent_id'() {
      this.calculate()
    },
    'editRow.path'(val) {
      this.calculate()
    },
    'editRow.model_id'(val) {
      this.calculate()
    },
    'editRow.type'(val) {
      this.calculate()
    },
  },

  methods: {
    async init() {
      let res = await menuServer.list()
      let tree = uiTool.transformTree(res.data)
      this.gridOption.data = this.mapTree(tree)

      let menuRows = res.data.filter((p) => p.type === '菜单')
      this.menuRows = menuRows
      let menuTree = uiTool.transformTree(menuRows)
      this.gridOption.menuData = this.mapTree(menuTree)

      this.$store.dispatch('setAuthorityMenus')
    },
    async initCol() {
      let res = await modelServer.all()

      let data = res.data.map((row) => {
        let { id, key, name } = row

        return { id, value: key + '-' + name, key }
      })
      this.modelRows = [{ id: 0, value: '自定义模板', key: 'custom_template' }, ...data] || []
    },

    calculate() {
      let modulePath = ''
      let parent_node_ids = this.parent_node_ids
      parent_node_ids.forEach((id) => {
        let menuRow = this.menuRows.find((p) => p.id === id)
        if (menuRow) {
          modulePath += menuRow.path + '/'
        }
      })

      if (this.editRow.type === '菜单' || this.editRow.type === '外链') {
        this.editRow.component = ''
        this.editRow.api_path = ''
        return
      }

      if (this.editRow.path) {
        let path = this.editRow.path.replace(/\//g, '_').replace(/:/g, '')

        this.editRow.component = modulePath + path + '.vue'
        this.editRow.api_path = modulePath + path + '_server.js'
      }
    },
    mapTree(tree) {
      let curTree = tree.map((p) => {
        if (p.children && p.children.length > 0) {
          p.children = this.mapTree(p.children)
        }

        return {
          ...p,
          value: p.id,
          label: p.name,
          expand: false,
          children: p.children,
        }
      })

      return curTree
    },
    editModal(row) {
      this.parent_node_ids = row.parent_node_ids
      this.editRow = row
      this.$refs.editModal.editShow(this.editRow, async (newRow) => {
        let param = Object.assign({}, this.editRow, newRow)
        await menuServer.edit(param)
        rootVue.$Message.success('修改成功！')
        this.init()
      })
    },
    addWarp() {
      this.editRow = { type: '菜单', model_id: 0, component: '', parent_id: 0, parent_node_ids: [], path: '', is_show: 1, is_show_menu: 1 }
      this.$refs.editModal.addShow(this.editRow, async (newRow) => {
        let param = Object.assign({}, newRow)
        await menuServer.add(param)
        rootVue.$Message.success('新增成功！')
        this.init()
      })
    },
    addSonWarp(row) {
      let { parent_node_ids, id, model_id } = row
      this.parent_node_ids = parent_node_ids
      this.editRow = { type: '页面', parent_id: id, model_id, component: '', parent_node_ids, is_show: 1, is_show_menu: 1 }
      this.$refs.editModal.addShow(this.editRow, async (newRow) => {
        let param = Object.assign({}, newRow)
        await menuServer.add(param)
        rootVue.$Message.success('新增成功！')
        this.init()
      })
    },
    async delConfirm(row) {
      uiTool.delConfirm(async () => {
        await menuServer.del(row)
        rootVue.$Message.success('删除成功！')
        this.init()
      })
    },
    async generate(row) {
      uiTool.showConfirm({ content: '你确定生成吗，生成将覆盖原来已存在apiServer和vuePage,请谨慎操作' }, async () => {
        let res = await menuServer.generate(row)
        rootVue.$Message.success('生成成功！')
        this.init()
      })
    },

    build() {
      uiTool.showConfirm({ content: '您将编译vue目录，执行npm run build,请耐心等待1-3分钟！' }, async () => {
        this.$store.commit('setBulid', true)
        await menuServer.build()
        this.$store.commit('setBulid', false)
        uiTool.showConfirm({ content: '编译成功,确定将刷新网页' }, async () => {
          window.location.reload()
        })
      })
    },
  },
}
</script>

<style>
.tree-box {
  overflow: auto;
}
</style>
